<template>
  <div class="page-container">
    <!-- Hero Section -->
    <section class="hero-section">
      <!-- 使用img标签替代background-image，获得更好的性能控制 -->
      <img
        class="hero-background-image"
        src="@/assets/images/home/hero.png"
        alt="Hero Background"
      />
      <div class="hero-content">
        <div class="hero-title">
          <span>开启您的</span>
          <img class="hero-icon1" src="~@/assets/images/home/hero-text.png" alt="" />
        </div>
        <p class="hero-description">
          从零基础到专家级别，我们提供最全面的AI课程体系，助您掌握人工智能核心技术
        </p>
        <!-- Stats Section -->
        <section class="stats-section">
          <div class="stats-grid">
            <div class="stat-item">
              <div class="stat-number stat-blue">50K+</div>
              <div class="stat-label">学员</div>
            </div>
            <div class="stat-item">
              <div class="stat-number stat-purple">200+</div>
              <div class="stat-label">课程</div>
            </div>
            <div class="stat-item">
              <div class="stat-number stat-cyan">24/7</div>
              <div class="stat-label">支持</div>
            </div>
            <div class="stat-item">
              <div class="stat-number stat-indigo">98%</div>
              <div class="stat-label">满意度</div>
            </div>
          </div>
        </section>
        <div class="hero-buttons">
          <img
            @click="toCoursePage('course_major_0')"
            class="hero-icon2"
            src="~@/assets/images/home/hero-btn.png"
            alt=""
          />
        </div>
      </div>
    </section>

    <!-- Course Categories -->
    <section class="categories-section">
      <div class="categories-container">
        <div class="categories-title"> 热门课程分类 </div>
        <n-grid x-gap="30" :cols="4">
          <n-gi
            v-for="category in categories"
            :key="category.name"
            class="category-card"
            @click="toCoursePage(category.link)"
          >
            <div class="category-icon" :class="category.bgColor">
              <img class="category-icon-img" :src="category.icon" alt="" />
            </div>
            <div class="category-name">{{ category.name }}</div>
            <p class="category-description">{{ category.description }}</p>
          </n-gi>
        </n-grid>
      </div>
    </section>

    <!-- Your Interests Section -->
    <section class="main-section interests-section">
      <div class="main-container interests-container">
        <div class="main-header interests-header">
          <h2 class="header-title interests-title">您的兴趣课程</h2>
          <button
            class="btn-style header-view-all interests-view-all"
            @click="toCoursePage('course_major_0')"
            >查看全部</button
          >
        </div>
        <n-grid v-show="interestCourses.length" x-gap="30" :cols="5" class="interests-grid">
          <n-gi
            v-for="course in interestCourses"
            :key="course.id"
            class="main-card course-card"
            @click="viewCourse(course.courseId)"
          >
            <div class="course-image-container">
              <n-image
                v-if="course.coverUrl"
                :src="course.coverUrl"
                class="main-image course-image"
                :img-props="{ style: { width: '100%' } }"
              />
              <div v-else class="main-image course-image no-image">
                <span>{{ course.title }}</span>
              </div>
              <div class="course-level-badge">
                {{ getLevelText(course.difficultyLevel) }}
              </div>
            </div>
            <div class="main-content course-content">
              <h4 class="content-title course-title">{{ course.title }}</h4>
              <p class="content-instructor course-instructor">{{ course?.user?.username }}</p>
              <div class="content-footer course-footer">
                <div class="course-likes">
                  <span class="like-icon">❤</span>
                  <span class="like-count">{{ course.likeCount }}</span>
                </div>
                <div class="course-price" :class="course.price ? 'price-paid' : 'price-free'">
                  {{ course.price ? '￥' + course.price : '免费' }}
                </div>
              </div>
            </div>
          </n-gi>
        </n-grid>
        <!-- 加载状态 -->
        <div v-if="loading" class="loading-container">
          <div class="loading-spinner"></div>
          <span class="loading-text">加载中...</span>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && interestCourses.length === 0" class="empty-state"> 暂无课程 </div>
      </div>
    </section>

    <!-- Hot Courses -->
    <section class="hot-courses-section">
      <div class="hot-courses-container">
        <div class="hot-courses-header">
          <h2 class="hot-courses-title">热门课程</h2>
          <p class="hot-courses-subtitle">最受学员欢迎的AI课程，助您快速提升技能</p>
        </div>
        <n-grid v-show="hotCourses.length" x-gap="30" :cols="3">
          <n-gi
            v-for="course in hotCourses"
            :key="course.id"
            class="hot-course-card"
            @click="viewCourse(course.courseId)"
          >
            <n-image
              v-if="course.coverUrl"
              :src="course.coverUrl"
              class="hot-course-image"
              :img-props="{ style: { width: '100%' } }"
            />
            <div v-else class="hot-course-image no-image">
              <span>{{ course.title }}</span>
            </div>
            <div class="hot-course-content">
              <div class="hot-course-badges">
                <span class="hot-badge">HOT</span>
                <span class="level-badge">{{ getLevelText(course.difficultyLevel) }}</span>
              </div>
              <h3 class="hot-course-title-text">{{ course.title }}</h3>
              <p class="hot-course-description">{{ course.description || '暂无简介' }}</p>
              <div class="hot-course-footer">
                <div class="hot-course-stats">
                  <div class="hot-course-likes">
                    <span class="like-icon">❤</span>
                    <span class="like-count">{{ course.likeCount }}</span>
                  </div>
                  <span class="students-count">{{ course.students || 0 }} 学员</span>
                </div>
                <div class="hot-course-price" :class="course.price ? 'price-paid' : 'price-free'">
                  {{ course.price ? '￥' + course.price : '免费' }}
                </div>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </div>
    </section>

    <!-- Latest Courses -->
    <section class="main-section latest-courses-section">
      <div class="main-container latest-courses-container">
        <div class="main-header latest-courses-header">
          <h2 class="header-title latest-courses-title">最新课程</h2>
          <button
            class="btn-style header-view-all latest-courses-view-more"
            @click="toCoursePage('course_major_0')"
            >查看更多</button
          >
        </div>
        <n-grid v-show="latestCourses.length" x-gap="30" :cols="5">
          <n-gi
            v-for="course in latestCourses"
            :key="course.courseId"
            class="main-card latest-course-card"
            @click="viewCourse(course.courseId)"
          >
            <div class="latest-course-image-container">
              <n-image
                v-if="course.coverUrl"
                :src="course.coverUrl"
                class="main-image latest-course-image"
                :img-props="{ style: { width: '100%' } }"
              />
              <div v-else class="main-image latest-course-image no-image">
                <span>{{ course.title }}</span>
              </div>
              <div class="new-badge"> NEW </div>
            </div>
            <div class="main-content latest-course-content">
              <h3 class="content-title latest-course-title-text">{{ course.title }}</h3>
              <p class="content-instructor latest-course-instructor">{{
                course?.user?.username
              }}</p>
              <div class="content-footer latest-course-footer">
                <span
                  class="course-price latest-course-price"
                  :class="course.price ? 'price-paid' : 'price-free'"
                >
                  {{ course.price ? '￥' + course.price : '免费' }}
                </span>
                <div class="course-likes latest-course-likes">
                  <span class="like-icon">❤</span>
                  <span class="like-count">{{ course.likeCount }}</span>
                </div>
              </div>
            </div>
          </n-gi>
        </n-grid>
      </div>
    </section>

    <!-- Learning Paths -->
    <section class="learning-paths-section">
      <div class="learning-paths-container">
        <div class="learning-paths-header">
          <h2 class="learning-paths-title">学习路径推荐</h2>
          <p class="learning-paths-subtitle">系统化的学习路径，从入门到精通</p>
        </div>
        <div class="learning-paths-grid">
          <div v-for="path in learningPaths" :key="path.id" class="learning-path-card">
            <div class="learning-path-icon" :class="path.bgColor">
              {{ path.icon }}
            </div>
            <h3 class="learning-path-title">{{ path.title }}</h3>
            <p class="learning-path-description">{{ path.description }}</p>
            <div class="learning-path-details">
              <div class="learning-path-detail-item">
                <span class="detail-label">课程数量</span>
                <span class="detail-value">{{ path.courseCount }}</span>
              </div>
              <div class="learning-path-detail-item">
                <span class="detail-label">预计时长</span>
                <span class="detail-value">{{ path.duration }}</span>
              </div>
              <div class="learning-path-detail-item">
                <span class="detail-label">难度等级</span>
                <span class="detail-value">{{ path.level }}</span>
              </div>
            </div>
            <button class="learning-path-button"> 开始学习 </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Expert Instructors -->
    <section class="expert-instructors-section">
      <div class="expert-instructors-container">
        <div class="expert-instructors-header">
          <h2 class="expert-instructors-title">名师课程</h2>
          <p class="expert-instructors-subtitle">业界顶尖专家亲自授课</p>
        </div>
        <div class="expert-instructors-grid">
          <div
            v-for="instructor in expertInstructors"
            :key="instructor.id"
            class="expert-instructor-card"
          >
            <img
              :src="instructor.avatar"
              :alt="instructor.name"
              class="expert-instructor-avatar"
              loading="lazy"
            />
            <h3 class="expert-instructor-name">{{ instructor.name }}</h3>
            <p class="expert-instructor-title">{{ instructor.title }}</p>
            <p class="expert-instructor-experience">{{ instructor.experience }}</p>
            <div class="expert-instructor-stats">
              <div class="expert-stat-item">
                <div class="stat-number">{{ instructor.courses }}</div>
                <div class="stat-label">课程</div>
              </div>
              <div class="expert-stat-item">
                <div class="stat-number">{{ instructor.students }}</div>
                <div class="stat-label">学员</div>
              </div>
              <div class="expert-stat-item">
                <div class="stat-number">{{ instructor.rating }}</div>
                <div class="stat-label">评分</div>
              </div>
            </div>
            <button class="expert-instructor-button"> 查看课程 </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Free Courses -->
    <section class="free-courses-section">
      <div class="free-courses-container">
        <div class="free-courses-header">
          <h2 class="free-courses-title">🎁 免费课程</h2>
          <p class="free-courses-subtitle">零成本开始您的AI学习之旅</p>
        </div>
        <div class="free-courses-grid">
          <div v-for="course in freeCourses" :key="course.id" class="free-course-card">
            <div class="free-course-image-container">
              <img
                :src="course.coverUrl"
                :alt="course.title"
                class="free-course-image"
                loading="lazy"
              />
              <div class="free-badge"> 免费 </div>
            </div>
            <div class="free-course-content">
              <h3 class="free-course-title">{{ course.title }}</h3>
              <p class="free-course-description">{{ course.description }}</p>
              <div class="free-course-stats">
                <div class="free-course-rating">
                  <span class="rating-star">★</span>
                  <span class="rating-value">{{ course.rating }}</span>
                </div>
                <span class="students-learning">{{ course.students }} 人学习</span>
              </div>
              <button class="free-course-button"> 立即学习 </button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Student Reviews -->
    <!--    <section class="py-16 px-4 sm:px-6 lg:px-8">-->
    <!--      <div class="max-w-7xl mx-auto">-->
    <!--        <div class="text-center mb-12">-->
    <!--          <h2 class="text-3xl font-bold text-gray-900 mb-4">学员评价</h2>-->
    <!--          <p class="text-gray-600">听听学员们的真实反馈</p>-->
    <!--        </div>-->
    <!--        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">-->
    <!--          <div-->
    <!--            v-for="review in studentReviews"-->
    <!--            :key="review.id"-->
    <!--            class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 hover:shadow-xl transition-all duration-300 border border-white/20"-->
    <!--          >-->
    <!--            <div class="flex items-center mb-4">-->
    <!--              <img-->
    <!--                :src="review.avatar"-->
    <!--                :alt="review.name"-->
    <!--                class="w-12 h-12 rounded-full object-cover mr-4"-->
    <!--              />-->
    <!--              <div>-->
    <!--                <h4 class="font-semibold text-gray-900">{{ review.name }}</h4>-->
    <!--                <p class="text-gray-600 text-sm">{{ review.course }}</p>-->
    <!--              </div>-->
    <!--            </div>-->
    <!--            <div class="flex items-center mb-3">-->
    <!--              <div class="flex text-yellow-500 mr-2">-->
    <!--                <span v-for="i in 5" :key="i">★</span>-->
    <!--              </div>-->
    <!--              <span class="text-gray-600 text-sm">{{ review.date }}</span>-->
    <!--            </div>-->
    <!--            <p class="text-gray-700 text-sm">{{ review.comment }}</p>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </section>-->

    <!-- Footer -->
    <footer class="footer">
      <div class="footer-container">
        <div class="footer-content">
          <div class="footer-brand">
            <div class="footer-brand-info">
              <span class="footer-brand-name">和通AI</span>
            </div>
            <p class="footer-brand-description"> 专业的AI教育平台，助您掌握人工智能核心技术 </p>
          </div>

          <div class="footer-links">
            <h3 class="footer-links-title">课程分类</h3>
            <ul class="footer-links-list">
              <li class="footer-link-item">AI专业课程</li>
              <li class="footer-link-item">AI职业课程</li>
              <li class="footer-link-item">AI赋能课程</li>
              <li class="footer-link-item">AI应用指南</li>
              <li class="footer-link-item">AI应用案例</li>
              <li class="footer-link-item">AI应用工具</li>
            </ul>
          </div>
        </div>

        <div class="footer-bottom">
          <p class="footer-copyright">&copy; 2025 </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  import type1 from '@/assets/icons/index/type1.png';
  import type2 from '@/assets/icons/index/type2.png';
  import type3 from '@/assets/icons/index/type3.png';
  import type4 from '@/assets/icons/index/type4.png';
  import { useRouter } from 'vue-router';
  import { getAllCourseList } from '@/api/course';

  const router = useRouter();

  const categories = [
    {
      name: '专业课程',
      description: '适用于高校学子的AI课程',
      icon: type1,
      courseCount: 45,
      bgColor: 'bg-blue-100',
      link: 'course_major_0',
    },
    {
      name: '职业课程',
      description: '适用于职场精英的AI课程',
      icon: type2,
      courseCount: 38,
      bgColor: 'bg-purple-100',
      link: 'course_vocation_1',
    },
    {
      name: '赋能课程',
      description: '赋能自我，点亮未来',
      icon: type3,
      courseCount: 32,
      bgColor: 'bg-green-100',
      link: 'course_empowerment_2',
    },
    {
      name: '应用指南',
      description: '告别“一看就会，一用就废”',
      icon: type4,
      courseCount: 28,
      bgColor: 'bg-orange-100',
      link: 'course_guideline_3',
    },
  ];

  const interestCourses = ref<any[]>([]);

  const hotCourses = ref<any[]>([]);

  const latestCourses = ref<any[]>([]);

  const learningPaths: any[] = [];

  const expertInstructors: any[] = [];

  const freeCourses: any[] = [];

  // const studentReviews = [
  //   {
  //     id: 1,
  //     name: '小明同学',
  //     course: 'Python机器学习实战',
  //     avatar: '/placeholder.svg?height=48&width=48',
  //     date: '2024年1月',
  //     comment: '课程内容非常实用，老师讲解清晰，项目案例很有启发性。通过学习成功转行到AI领域！',
  //   },
  // ];

  function viewCourse(courseId: any) {
    // 跳转到课程详情页
    router.push({
      name: 'Video', // 使用路由名称
      query: {
        courseId: courseId,
      },
    });
  }

  // 分页参数
  const pageNum = ref(1);
  const pageSize = 100;
  const loading = ref(false);
  const pages = ref(0);
  const dataList = ref<any[]>([]);

  async function loadData() {
    loading.value = true;
    try {
      const params = {
        pageNum: pageNum.value,
        pageSize: pageSize,
      };

      const data: any = await getAllCourseList(params);
      dataList.value = data.records || [];
      if (dataList.value.length > 8) {
        interestCourses.value = dataList.value.slice(0, 9);
        hotCourses.value = dataList.value.slice(0, 6);
        latestCourses.value = dataList.value.slice(0, 9);
      } else {
        interestCourses.value = dataList.value;
        hotCourses.value = dataList.value;
        latestCourses.value = dataList.value;
      }
      pages.value = data.pages;
    } catch (error) {
      console.error('error:', error);
    } finally {
      loading.value = false;
    }
  }

  onMounted(() => {
    loadData();
  });

  function toCoursePage(link: string) {
    router.push({ name: link });
  }

  function getLevelText(level: any) {
    const levelMap = {
      0: '入门',
      1: '中级',
      2: '高级',
      3: '适合所有人',
    };

    return levelMap[level] || '未知';
  }
</script>
<style lang="less" scoped>
  // 页面容器
  .page-container {
    min-height: 100vh;
  }

  .main-section {
    .main-container {
      margin: 0 200px;
      min-width: 1000px;

      .main-header {
        position: relative;
        .header-title {
          text-align: center;
          font-size: 30px;
          color: #111827;
        }
        .header-view-all {
          position: absolute;
          top: 3px;
          right: 0;
        }
      }

      .main-card {
        margin-top: 30px;
        border-radius: 10px;
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow 0.8s ease;

        &:hover {
          box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
        }

        .main-image {
          width: 100%;
          height: 150px;
        }

        .main-content {
          padding: 15px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          .content-title {
            font-size: 16px;
            color: #111827;
          }

          .content-instructor {
            color: #4b5563;
          }

          .content-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .course-likes {
              display: flex;
              align-items: center;
              gap: 8px;

              .like-icon {
                color: #ef4444;
              }

              .like-count {
                color: #374151;
              }
            }

            .course-price {
              font-weight: 700;

              &.price-paid {
                color: #dc2626;
              }

              &.price-free {
                color: #059669;
              }
            }
          }
        }
      }
    }
  }

  // Hero Section
  .hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;

    .hero-background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    .hero-content {
      margin-left: 150px;
      position: relative;
      z-index: 1;
      // 启用硬件加速，优化渲染性能
      transform: translateZ(0);
      will-change: transform;
      // 优化内容渲染
      contain: layout style paint;

      .hero-title {
        font-size: 56px;
        color: #ffffff;
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        gap: 10px;

        .hero-icon1 {
          height: 70px;
          display: block;
        }
      }

      .hero-description {
        font-size: 18px;
        color: #ffffff;
        margin-bottom: 20px;
      }

      .hero-buttons {
        margin-top: 120px;

        .hero-icon2 {
          cursor: pointer;
          height: 80px;
          display: block;
        }
      }

      // Stats Section
      .stats-section {
        .stats-grid {
          display: flex;
          justify-content: space-between;

          .stat-item {
            text-align: center;
            color: #ffffff;

            .stat-number {
              font-size: 40px;
              font-weight: bold;

              &.stat-blue {
                color: #97fdfe;
              }

              &.stat-purple {
                color: #4affa1;
              }

              &.stat-indigo {
                color: #faac28;
              }

              &.stat-cyan {
                color: #dc3aa9;
              }
            }
          }
        }
      }
    }
  }

  // Categories Section
  .categories-section {
    background: #eceffc;
    position: relative;
    height: 350px;

    .categories-container {
      padding: 30px;
      background: #ffffff;
      border-radius: 40px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
      z-index: 10;
      position: absolute;
      top: -60px;
      left: 200px;
      right: 200px;

      .categories-title {
        font-size: 30px;
        text-align: center;
        color: #111827;
        margin-bottom: 30px;
      }

      .category-card {
        background: #f7f7f7;
        border-radius: 10px;
        padding: 30px 0;
        cursor: pointer;
        transition: transform 0.2s ease;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
          transform: scale(1.02) translateZ(0);
        }

        .category-icon {
          width: 50px;
          height: 50px;
          border-radius: 5px;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;

          .category-icon-img {
            width: 30px;
            height: 30px;
          }

          &.bg-blue-100 {
            background-color: #dbeafe;
          }

          &.bg-purple-100 {
            background-color: #f3e8ff;
          }

          &.bg-green-100 {
            background-color: #dcfce7;
          }

          &.bg-orange-100 {
            background-color: #fed7aa;
          }
        }

        .category-name {
          font-size: 1.25rem;
          color: #111827;
          margin-bottom: 0.5rem;
        }

        .category-description {
          color: #4b5563;
          font-size: 0.875rem;
          margin-bottom: 1rem;
        }
      }
    }
  }

  // Interests Section
  .interests-section {
    background: #eceffc;
    padding: 40px 0 80px;

    .course-card {
      background: rgba(255, 255, 255, 0.8);

      .course-image-container {
        position: relative;

        .course-level-badge {
          position: absolute;
          top: 15px;
          left: 15px;
          background: linear-gradient(to right, #10b981, #059669);
          color: white;
          padding: 2px 10px;
          border-radius: 20px;
        }
      }
    }
  }

  // Hot Courses Section
  .hot-courses-section {
    padding: 70px 0;
    background: rgba(255, 255, 255, 1);

    .hot-courses-container {
      margin: 0 200px;
      min-width: 1000px;

      .hot-courses-header {
        text-align: center;

        .hot-courses-title {
          font-size: 30px;
          color: #111827;
        }

        .hot-courses-subtitle {
          margin-top: 15px;
          color: #4b5563;
        }
      }

      .hot-course-card {
        background-color: #f7f7f7;
        border-radius: 10px;
        padding: 20px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 20px;
        transition: box-shadow 0.8s ease;
        margin-top: 30px;

        &:hover {
          box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
        }

        @media (min-width: 1200px) {
          flex-direction: row;
        }

        .hot-course-image {
          width: 100%;
          height: 140px;
          object-fit: inherit;
          border-radius: 10px;

          @media (min-width: 1200px) {
            width: 140px;
            height: 120px;
          }
        }

        .hot-course-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 8px;

          .hot-course-badges {
            display: flex;
            align-items: center;
            gap: 10px;

            .hot-badge {
              background-color: #fee2e2;
              color: #dc2626;
              padding: 2px 8px;
              border-radius: 20px;
              font-size: 12px;
            }

            .level-badge {
              background-color: #dbeafe;
              color: #2563eb;
              padding: 2px 8px;
              border-radius: 20px;
              font-size: 12px;
            }
          }

          .hot-course-title-text {
            font-size: 18px;
            color: #111827;
          }

          .hot-course-description {
            color: #4b5563;
          }

          .hot-course-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .hot-course-stats {
              display: flex;
              align-items: center;
              gap: 20px;

              .hot-course-likes {
                display: flex;
                align-items: center;
                gap: 5px;
              }

              .like-icon {
                color: #ef4444;
              }

              .students-count {
                color: #6b7280;
              }
            }

            .hot-course-price {
              font-weight: 700;
              font-size: 18px;

              &.price-paid {
                color: #dc2626;
              }

              &.price-free {
                color: #059669;
              }
            }
          }
        }
      }
    }
  }

  // Latest Courses Section
  .latest-courses-section {
    background: #eceffc;
    padding: 70px 0;

    .latest-courses-container {
      .latest-course-card {
        background: rgba(255, 255, 255, 0.8);

        .latest-course-image-container {
          position: relative;
          .new-badge {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: linear-gradient(to right, #a855f7, #ec4899);
            color: white;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
          }
        }

        .latest-course-content {
          .latest-course-title-text {
            font-weight: 600;
          }
        }
      }
    }
  }

  // Learning Paths Section
  .learning-paths-section {
    padding: 4rem 1rem;
    background: linear-gradient(135deg, #faf5ff, #fce7f3);

    @media (min-width: 640px) {
      padding: 4rem 1.5rem;
    }

    @media (min-width: 1024px) {
      padding: 4rem 2rem;
    }

    .learning-paths-container {
      max-width: 100rem;
      margin: 0 auto;

      .learning-paths-header {
        text-align: center;
        margin-bottom: 3rem;

        .learning-paths-title {
          font-size: 1.875rem;
          color: #111827;
          margin-bottom: 1rem;
        }

        .learning-paths-subtitle {
          color: #4b5563;
          max-width: 32rem;
          margin: 0 auto;
        }
      }

      .learning-paths-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;

        @media (min-width: 768px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .learning-path-card {
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(8px);
          border-radius: 1rem;
          padding: 2rem;
          border: 1px solid rgba(255, 255, 255, 0.2);
          text-align: center;
          cursor: pointer;
          transition: all 0.3s ease;
          // 优化渲染性能
          transform: translateZ(0);
          will-change: transform;
          contain: layout style paint;

          &:hover {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            transform: scale(1.02) translateZ(0);
            transition: transform 0.2s ease;
          }

          .learning-path-icon {
            width: 4rem;
            height: 4rem;
            margin: 0 auto 1.5rem;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.875rem;
          }

          .learning-path-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.75rem;
          }

          .learning-path-description {
            color: #4b5563;
            margin-bottom: 1.5rem;
          }

          .learning-path-details {
            margin-bottom: 1.5rem;

            .learning-path-detail-item {
              display: flex;
              justify-content: space-between;
              font-size: 0.875rem;
              margin-bottom: 0.5rem;

              &:last-child {
                margin-bottom: 0;
              }

              .detail-label {
                color: #4b5563;
              }

              .detail-value {
                font-weight: 500;
              }
            }
          }

          .learning-path-button {
            width: 100%;
            background: linear-gradient(to right, #a855f7, #ec4899);
            color: white;
            padding: 0.75rem;
            border-radius: 0.75rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
  }

  // Expert Instructors Section
  .expert-instructors-section {
    padding: 4rem 1rem;

    @media (min-width: 640px) {
      padding: 4rem 1.5rem;
    }

    @media (min-width: 1024px) {
      padding: 4rem 2rem;
    }

    .expert-instructors-container {
      max-width: 100rem;
      margin: 0 auto;

      .expert-instructors-header {
        text-align: center;
        margin-bottom: 3rem;

        .expert-instructors-title {
          font-size: 1.875rem;
          color: #111827;
          margin-bottom: 1rem;
        }

        .expert-instructors-subtitle {
          color: #4b5563;
        }
      }

      .expert-instructors-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;

        @media (min-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .expert-instructor-card {
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(8px);
          border-radius: 1rem;
          padding: 1.5rem;
          border: 1px solid rgba(255, 255, 255, 0.2);
          text-align: center;
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          }

          .expert-instructor-avatar {
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            margin: 0 auto 1rem;
            object-fit: cover;
            transition: transform 0.3s ease;

            .expert-instructor-card:hover & {
              transform: scale(1.05);
              transition: transform 0.2s ease;
            }
          }

          .expert-instructor-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
          }

          .expert-instructor-title {
            color: #2563eb;
            font-weight: 500;
            margin-bottom: 0.75rem;
          }

          .expert-instructor-experience {
            color: #4b5563;
            font-size: 0.875rem;
            margin-bottom: 1rem;
          }

          .expert-instructor-stats {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1rem;

            .expert-stat-item {
              text-align: center;
            }
          }

          .expert-instructor-button {
            width: 100%;
            background: linear-gradient(to right, #3b82f6, #9333ea);
            color: white;
            padding: 0.5rem;
            border-radius: 0.75rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            }
          }
        }
      }
    }
  }

  // Free Courses Section
  .free-courses-section {
    padding: 4rem 1rem;
    background: linear-gradient(to right, #f0fdf4, #ecfdf5);

    @media (min-width: 640px) {
      padding: 4rem 1.5rem;
    }

    @media (min-width: 1024px) {
      padding: 4rem 2rem;
    }

    .free-courses-container {
      max-width: 100rem;
      margin: 0 auto;

      .free-courses-header {
        text-align: center;
        margin-bottom: 3rem;

        .free-courses-title {
          font-size: 1.875rem;
          color: #111827;
          margin-bottom: 1rem;
        }

        .free-courses-subtitle {
          color: #4b5563;
        }
      }

      .free-courses-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;

        @media (min-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
          grid-template-columns: repeat(4, 1fr);
        }

        .free-course-card {
          background: rgba(255, 255, 255, 0.9);
          backdrop-filter: blur(8px);
          border-radius: 1rem;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.2);
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
          }

          .free-course-image-container {
            position: relative;

            .free-course-image {
              width: 100%;
              height: 10rem;
              object-fit: cover;
              transition: transform 0.3s ease;

              .free-course-card:hover & {
                transform: scale(1.02);
                transition: transform 0.2s ease;
              }
            }

            .free-badge {
              position: absolute;
              top: 0.75rem;
              left: 0.75rem;
              background: linear-gradient(to right, #10b981, #059669);
              color: white;
              padding: 0.25rem 0.75rem;
              border-radius: 9999px;
              font-size: 0.875rem;
              font-weight: 700;
            }
          }

          .free-course-content {
            padding: 1rem;

            .free-course-title {
              font-weight: 600;
              color: #111827;
              margin-bottom: 0.5rem;
              text-wrap: balance;
            }

            .free-course-description {
              color: #4b5563;
              font-size: 0.875rem;
              margin-bottom: 0.75rem;
            }

            .free-course-stats {
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 0.75rem;

              .free-course-rating {
                display: flex;
                align-items: center;
                gap: 0.25rem;

                .rating-star {
                  color: #eab308;
                  font-size: 0.875rem;
                }

                .rating-value {
                  color: #374151;
                  font-size: 0.875rem;
                }
              }

              .students-learning {
                color: #6b7280;
                font-size: 0.875rem;
              }
            }

            .free-course-button {
              width: 100%;
              background: linear-gradient(to right, #10b981, #059669);
              color: white;
              padding: 0.5rem;
              border-radius: 0.75rem;
              font-weight: 500;
              border: none;
              cursor: pointer;
              transition: all 0.3s ease;

              &:hover {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
              }
            }
          }
        }
      }
    }
  }

  // Footer
  .footer {
    background-color: #111827;
    color: white;
    padding: 4rem 1rem;

    @media (min-width: 640px) {
      padding: 4rem 1.5rem;
    }

    @media (min-width: 1024px) {
      padding: 4rem 2rem;
    }

    .footer-container {
      max-width: 100rem;
      margin: 0 auto;

      .footer-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 2rem;

        @media (min-width: 768px) {
          grid-template-columns: repeat(4, 1fr);
        }

        .footer-brand {
          grid-column: 1 / -1;

          @media (min-width: 768px) {
            grid-column: 1 / 2;
          }

          .footer-brand-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 1rem;

            .footer-brand-name {
              font-size: 1.25rem;
              font-weight: 700;
            }
          }

          .footer-brand-description {
            color: #9ca3af;
            font-size: 0.875rem;
          }
        }

        .footer-links {
          grid-column: 1 / -1;

          @media (min-width: 768px) {
            grid-column: 2 / 3;
          }

          .footer-links-title {
            font-weight: 600;
            margin-bottom: 1rem;
          }

          .footer-links-list {
            list-style: none;
            padding: 0;
            margin: 0;

            .footer-link-item {
              color: #9ca3af;
              font-size: 0.875rem;
              margin-bottom: 0.5rem;
              cursor: pointer;
              transition: color 0.3s ease;

              &:hover {
                color: white;
              }

              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }

      .footer-bottom {
        border-top: 1px solid #374151;
        padding-top: 2rem;
        text-align: center;

        .footer-copyright {
          color: #9ca3af;
          font-size: 0.875rem;
          margin: 0;
        }
      }
    }
  }

  // 动画优化类
  .animate-in {
    // 当元素进入视口时启用动画
    .category-card,
    .course-card,
    .hot-course-card,
    .learning-path-card {
      transition: transform 0.2s ease, box-shadow 0.3s ease;
    }
  }

  // 全局滚动优化
  * {
    // 优化滚动性能
    scroll-behavior: smooth;
  }

  // 减少重绘的通用优化
  .category-card,
  .course-card,
  .hot-course-card,
  .learning-path-card,
  .expert-instructor-card,
  .free-course-card {
    // 通用性能优化
    transform: translateZ(0);
    will-change: transform;
    contain: layout style paint;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
</style>
